<template>
  <div class="zcnews">
    <div class="up_bg">
		<img src="~img/marketingExtension/up_bg.png" />
	</div>
    <div class="content">
      <div class="content_s">
        <div class="left_part">
          <div
            class="title_item"
            :class="{ active: activeTab == index }"
            v-for="(item, index) in lists"
            :key="index"
            @click="handleTab(item, index)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="right_part">
          <div
            class="value_item"
            v-for="(item, index) in showList"
            :key="index"
			@click="toDetail(item)"
          >
            <img src="~img/marketingExtension/tips.png" class="imgs" />
            <span>{{ item.a }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { info } from "./info.js";
export default {
  name: "zcnews",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      activeTab: 0,
      cname: "",
      num: 0,
      list: [],
      kList: [
        "省级",
        "苏州市",
        "常熟市",
        "昆山市",
        "吴中区",
        "姑苏区",
        "高新区",
        "张家港市",
        "太仓市",
        "吴江区",
        "相城区",
        "工业园区",
      ],
      type: "科技创新",
      lists: [
        { title: "科技创新", type: 0 },
        { title: "普惠小微", type: 1 },
        { title: "乡村振兴", type: 2 },
        { title: "制造业转型", type: 3 },
        { title: "文化产业", type: 4 },
      ],
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    // this.type = this.$route.query.type;
    // this.num= this.$route.query.num;

    const list = JSON.parse(JSON.stringify(info));
    console.log(this.type);
    this.showList = list.filter((pre) => pre.TAG === this.type);
    console.log(this.showList);
  },
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    goUrl(url) {
      // this.$router.push({
      // 	name: url,
      // });
    },
    getName(item) {
      let name = "-";
      if (item && item.length > 0) {
        item.forEach((element) => {
          if (this.kList.includes(element)) {
            name = element;
          }
        });
      }
      console.log(name);
      return name;
    },
    searchC() {
      const list = JSON.parse(JSON.stringify(info));
      this.showList = list
        .filter((pre) => pre.TAG === this.$route.query.type)
        .filter((val) => val.a.indexOf(this.cname) > -1);
    },
    toDetail(item) {
      sessionStorage.setItem("zcObj", JSON.stringify(item));
      this.$router.push("/policy/detail");
    },
    getUrlParam(name) {
      const queryStr = String(window.location).split("?")[1] || "";
      name = encodeURIComponent(name);
      let arr = new RegExp("(^|&)" + name + "=([^&]*)(&|$)").exec(queryStr);
      if (arr) {
        return decodeURIComponent(RegExp.$2);
      } else {
        return "";
      }
    },
    handleTab(item, index) {
      this.type = item.title;
      this.activeTab = index;
      const list = JSON.parse(JSON.stringify(info));
      this.showList = list.filter((pre) => pre.TAG === item.title);
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.zcnews {
  height: 100vh;
  overflow-y: auto;
  position: relative;
  // background-color: #ededed;
  // display: flex;
  // flex-direction: column;
  background-color:#7cc1a7 ;
  .up_bg {
    // background-image: url("~img/marketingExtension/up_bg.png");
    // // width: 100%;
    // // height: 600px;
    // // background-size: 100% 100%;
	// background-size:cover;
    // background-repeat: no-repeat;
	img{
		width: 100vw;
	}
  }
  .content {
    width: 96%;
    margin: 0 auto;
    border: solid 1px #49a2a8;
    border-radius: 20px;

    overflow: auto;
    background: #fff;
    position: absolute;
    top: 440px;
    margin-left: 2%;
	// bottom: 10px;
    .content_s {
      display: flex;
      .left_part {
        width: 100px;
        .title_item {
          height: 56px;
          text-align: center;
          line-height: 56px;
          font-size: 15px;
          color: #555;
          border: 1px solid #f6f6f6;
          &.active {
            background: #eaf1f8;
            color: #000000;
          }
        }
      }
      .right_part {
        flex: 1;
        .value_item {
          display: flex;
          padding: 18px 18px 18px 8px;
          border: 1px solid #f6f6f6;
          .imgs {
            width: 16px;
            height: 16px;
            margin-right: 4px;
			margin-top: 2px;
          }
          span {
            font-size: 13px;
            color: #000000;
            line-height: 20px;
			overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
</style>
